<template>
  <div>
    <input
      type="text"
      v-model='name'
    >
    <Child1
      :name123='name'
      @click='f1'
    ></Child1>
    <my-input v-model='name' />
    <!-- :value='name'  @input='v=>name=v' -->
    <Child1 :name123.sync='name'></Child1>
    <!-- :name123='name' @update:name123='v=>name=v' -->
  </div>
</template>
<script>
/* 

  父传子： 自定义属性+props
  子传父： 自定义事件+$emit（宗旨就是我子组件不去修改父组件传进来的数据 我把要给父组件的数据通过函数参数的方式给与）
  但凡是组件上的事件 都是自定义事件

  v-model 是 :value 和@input的结合体

*/
// @ is an alias to /src
import Child1 from "./components/Child.vue";
export default {
  name: "XXX",
  data() {
    return {
      name: "珠峰",
    };
  },
  components: { Child1 },
  methods: {
    f1(val) {
      console.log(arguments);
      this.name = val;
    },
  },
};
</script>
<style lang="less">
</style>